<!--
* @FileDescription: 我的信息
* @Author: chenz
* @Date: 2021/4/20
* @LastEditors: 最后更新作者
* @LastEditTime: 最后更新时间
-->
<template>
	<view class="my-info">
		<!-- 头像 -->
		<view class="li">
			<view class="title">
				{{avatarTitle}}
			</view>
			<view class="data">
				<image class="avatar" :src="avatarSrc" mode=""></image>
				<cl-icon class="pos-r" name="cl-icon-arrow-right" :size="30"></cl-icon>
			</view>
		</view>
		<!-- 昵称 -->
		<view class="li" @click="isShowDialog({title:userTitle,type:2})">
			<view class="title">
				{{userTitle}}
			</view>
			<view class="data">
				<text class="text">{{ username }}</text>
				<cl-icon class="pos-r" name="cl-icon-arrow-right" :size="30"></cl-icon>
			</view>
		</view>
		<!-- 绑定手机 -->
		<view class="li" @click="isShowDialog({title:phoneTitle,type:3})">
			<view class="title">
				{{phoneTitle}}
			</view>
			<view class="data">
				<text class="text">{{phoneVal}}</text>
				<cl-icon class="pos-r" name="cl-icon-arrow-right" :size="30"></cl-icon>
			</view>
		</view>
		<cl-button type="warning" @click="onSave">保存</cl-button>
		<!-- 弹框 -->
		<cl-dialog :title="isTitle" :visible.sync="visible" :close-on-click-modal="flase">
			<cl-input v-model="inputVal" placeholder="请输入内容"></cl-input>
			<cl-button type="warning" @click="onaffirm">确认</cl-button>
		</cl-dialog>
	</view>
</template>

<script>
	export default {
		name: "MyInfo",
		data() {
			return {
				avatarTitle: "头像",
				userTitle: "昵称",
				phoneTitle: "绑定手机",
				visible: false,
				isTitle: "",
				avatarSrc: "../../static/black.jpg",
				username: "默默",
				phoneVal: "123456789123",
				inputType: "",
				inputVal: ""
			}
		},
		watch: {
			visible: function(visible) {
				if (!visible) {

				}
			},
		},
		methods: {
			/**
			 * @description 显示dialog
			 *  @param {params} 参数
			 */
			isShowDialog(params) {
				console.log('显示dialog', params)
				const {
					title,
					type
				} = params
				this.isTitle = `修改${title}`
				this.inputTitle = title
				this.inputType = type
				this.visible = true
			},

			// 修改数据
			onaffirm() {
				this.visible = false
				if (this.inputType === 2 && this.inputVal !== "") {
					this.username = this.inputVal
					this.inputVal = ""
				}
				if (this.inputType === 3 && this.inputVal !== "") {
					this.phoneVal = this.inputVal
					this.inputVal = ""
				}
			},

			// 保存事件
			onSave() {
				console.log('保存走接口')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-info {
		padding: 40rpx;

		.li {
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid rgba(204, 204, 204, 0.2);

			.title {
				flex: 1;
			}

			.data {
				flex: 1;
				padding-right: 40rpx;
				position: relative;
				font-size: 32rpx;

				.text {
					color: rgba(0, 0, 0, 0.38);
					line-height: 90rpx;
					float: right;
				}

				.avatar {
					width: 132rpx;
					height: 132rpx;
					border-radius: 50%;
					float: right;
					margin-bottom: 20rpx;
				}

				.pos-r {
					color: rgba(0, 0, 0, 0.38);
					position: absolute;
					top: 30%;
					right: 0;
				}
			}
		}
	}

	/deep/.cl-button {
		width: 100%;
		margin-top: 10rpx;
	}
</style>
